<template>
  <div id="cakes">
    <div class="banner w-full flex justify-center items-center">
        <h1>美味蛋糕</h1>
    </div>
    <div class="ready-box w-full bg-white" v-if="!delayIn"></div>
    <div class="w-full container flex justify-between flex-wrap " v-else>
      <!-- 蛋糕左列 -->
      <ul :class="delayIn ? 'left-trans': ''">
        <li v-for="(item,index) in leftArr" :key="index">
          <a :href="item.toBuy" class="inline-block w-full">
            <img :src="item.src" :alt="item.desc" class="w-full cake-img" /> 
            <div class="cake-info">
              <h2>{{ item.title }}</h2>
              <p class="text-left">{{ item.desc }}</p>
              <div class="flex justify-between w-full">
                <div class="left ">
                  <div class="preferential">￥{{item.price}}</div>
                  <div class="original-price line-through">￥{{ item.old_price }}</div>
                </div>
                <div class="right flex flex-col-reverse"><img src="/imgs/cakes/buy-car.png" /></div>
              </div>
            </div>
          </a>
        </li>
      </ul>
      <!-- 蛋糕右列 -->
      <ul :class="delayIn ? 'right-trans': ''">
        <li v-for="(item,index) in rightArr" :key="index">
          <a :href="item.toBuy" class="inline-block w-full">
            <img :src="item.src" :alt="item.desc" class="w-full cake-img" /> 
            <div class="cake-info">
              <h2>{{ item.title }}</h2>
              <p class="text-left">{{ item.desc}}</p>
              <div class="flex justify-between w-full">
                <div class="left ">
                  <div class="preferential">￥{{item.price}}</div>
                  <div class="original-price line-through">￥{{ item.old_price }}</div>
                </div>
                <div class="right flex flex-col-reverse"><img src="/imgs/cakes/buy-car.png" /></div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import {cake_1, cake_2, cake_3, cake_4, cake_5, cake_6, cake_7, cake_8, cake_9, cake_10, cake_11, cake_12} from '@/const/index'
export default {
  head() {
    return {
      meta: [{
        hid: 'keywords',
        name: 'keywords',
        content: '熊猫不走、生日蛋糕、熊猫跳舞、水果蛋糕、慕斯蛋糕、奶油蛋糕、芝士蛋糕、动物奶油蛋糕；四大天王、四大美人、小公主、小王子、欢乐果园、幸福满满、榴莲千层'
      }]
    }
  },
  setup() {
    const leftArr = ref([
      {price: '199.00', old_price: '440.00', title: '四大天王 / 约7号',  src: cake_1,desc: '动物奶油鲜果蛋糕', toBuy: 'https://j.youzan.com/Y_pFmj',},
      {price: '189.00', old_price: '293.00', title: '小公主 / 约6号',  src: cake_3,desc: '动物奶油鲜果蛋糕', toBuy: 'https://j.youzan.com/qf3Fmj'},
      {price: '209.00', old_price: '306.00', title: '欢乐果园 / 约8号',  src: cake_5,desc: '动物奶油鲜果蛋糕', toBuy: 'https://j.youzan.com/mYrFmj'},
      {price: '179.00', old_price: '306.00', title: '椰椰椰 / 约7号', src: cake_7,desc: '动物奶油鲜果蛋糕', toBuy: 'https://j.youzan.com/24bFmj'},
      {price: '279.00', old_price: '537.00', title: '玫瑰爱神 / 约8号',  src: cake_9,desc: '动物奶油鲜果蛋糕', toBuy: '	https://j.youzan.com/2tOFmj'},
      {price: '189.00', old_price: '709.00', title: '幸运锦鲤 / 约6号',  src: cake_11,desc: '动物奶油鲜果蛋糕', toBuy: '	https://j.youzan.com/hEQFmj'},

    ])  
    const rightArr = ref([
      {price: '209.00', old_price: '293.00', title: '四大美人 / 约7号',  src: cake_2,desc: '慕斯蛋糕', toBuy: 'https://j.youzan.com/4YEFmj'},
      {price: '189.00', old_price: '293.00', title: '小王子 / 约6号',  src: cake_4,desc: '动物奶油鲜果蛋糕', toBuy: 'https://j.youzan.com/sAwFmj'},
      {price: '189.00', old_price: '306.00', title: '幸福满满 / 约6号',  src: cake_6,desc: '动物奶油鲜果蛋糕', toBuy: '	https://j.youzan.com/CW-Fmj'},
      {price: '179.00', old_price: '306.00', title: '榴莲千层 / 约8号',  src: cake_8,desc: '动物奶油鲜果蛋糕', toBuy: '	https://j.youzan.com/Ia8Fmj'},
      {price: '249.00', old_price: '399.00', title: '一夜暴富 / 约7号', src: cake_10,desc: '慕斯蛋糕', toBuy: 'https://j.youzan.com/dO2Fmj'},
      {price: '189.00', old_price: '299.00', title: '鲜果多多 / 约6号',  src: cake_12,desc: '动物奶油鲜果蛋糕', toBuy: 'https://j.youzan.com/LfUFmj'},
    ])
    const delayIn = ref(false)
    onMounted(() => {
      setTimeout(() => {
        delayIn.value = true
      }, 100);
    })
    return {
      leftArr, rightArr, delayIn
    };
  },
};
</script>
<style lang="scss" scoped>
#cakes {
  .banner {
    height: 59.32px;
    background: url('/imgs/cakes/banner-bg.png') no-repeat;
    background-size: cover;
    margin-bottom: 32.68px;
    h1 {
      font: 600 20px 'PingFang SC';
      color: #FFFFFF;
    }
  }
  .ready-box {
    height: 100vh;
  }
  .container {
    padding: 0 9px 23px;
    li {
      width: 174px;
      height: 272px;
      margin-bottom: 10px;
      box-shadow: (0px 2px 2px rgba(0, 0, 0, 0.1));
      .cake-img {
        height: 174px;
        background-color: #f3f3f3;
      }
      .cake-info {
        padding: 9px;
        h2 {
          font: 500 14px 'PingFang SC';
        }
        p {
          font: 400 12px  'Inter';
          color: #6C7072;
          margin: 5px auto;
        }
        .left {
          .preferential {
            font: 400 12px 'PingFang SC';
            color: #D61718;
          }
          .original-price {
            font: 400 11px 'PingFang SC';
            color: #979C9E;
          }
        }
        .right {
          img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
          }
        }
      }
    }
  }
  .left-trans {
    animation: left-tran .5s forwards;
    @keyframes left-tran {
      0% { opacity: 0; transform: translateX(-1000px); display: none;}
      100% { opacity: 1; transform: translateX(0); display: block;}
    }
  }
  .right-trans {
    animation: right-tran .5s  forwards;
    @keyframes right-tran {
      0% { opacity: 0; transform: translateX(1000px); display: none;}
      100% { opacity: 1; transform: translateX(0); display: block ;}
    }
  }

}
</style>